<template>
	<view class="par">
		<view class="par-apply">
			<view class="par-type">选择合伙人类型：</view>
			<radio-group style="margin: 10px 0;display: flex;" @change="radioChange">
				<label class="uni-list-cell uni-list-cell-pd">
					<view>
						<radio color="#FFAB71" value="1" :checked="type == 1" />
						<view style="display: inline-block;">城市合伙人</view>
					</view>
				</label>
				<label style="margin-left: 20px;">
					<view>
						<radio color="#FFAB71" value="2" :checked="type == 2" />
						<view style="display: inline-block;">区域合伙人</view>
					</view>
				</label>
			</radio-group>

			<view class="par-iphone" @tap="handleTap('picker3')">
				<view class="iphone-text">
					省市区
				</view>
				<input type="type" v-model="addr" placeholder="点击按钮选择" disabled />
				<view class="add-but">选择地区</view>
			</view>
			<view class="par-iphone">
				<view class="iphone-text">联系电话</view>
				<input type="number" v-model="tel" placeholder="请填写您的联系电话" />
			</view>
			<view class="par-tar">
				<view class="iphone-text remark">留言备注</view>
				<textarea rows="1" cols="2" v-model="remark" placeholder="请输入备注留言" maxlength="130" style="height: 100px;width: 259px;">
				</textarea>
			</view>
			<view v-if="status == 1" class="par-but-applying">(审核中)</view>
			<view v-else-if="status == 2" class="par-but">已通过</view>
			<view v-else-if="status == 3" class="par-but jujue" @click="submit">已驳回,重新提交</view>
			<view v-else class="par-but" @click="submit">提交</view>
		</view>

		<!--省市区-->
		<lb-picker ref="picker3" v-model="area" mode="multiSelector" :list="list" :level="3" @confirm="handleConfirm">
		</lb-picker>
	</view>
</template>

<script>
	import LbPicker from '@/components/lb-picker'
	import areaData from 'libs/area-data-min'
	export default {
		components: {
			LbPicker
		},
		data() {
			return {
				area: [],
				list: areaData,
				type: 1,
				tel: '',
				remark: '',
				addr: '',
				status: ''
			}
		},
		onLoad() {
			this.getPartnerInfo()
		},
		methods: {
			getPartnerInfo() {
				this.$http.partner_apply_info().then(res => {
					console.log(res)
					if (res.data) {
						let info = res.data
						this.addr = info.province_text + info.city_text + info.area_text
						this.tel = info.mobile
						this.remark = info.info
						this.type = info.type
						this.status = info.status
						this.area = [{
								label: info.province_text,
								value: info.province
							},
							{
								label: info.city_text,
								value: info.city
							},
							{
								label: info.area_text,
								value: info.area
							}
						]
					}
				})
			},
			radioChange(e) {
				this.type = e.detail.value
			},
			handleTap(picker) {
				this.$refs[picker].show()
			},
			handleConfirm(item) {
				console.log('confirm::', item.item)
				this.area = item.item
				// if(this.type == 1){
				// 	this.addr = this.area[0].label+this.area[1].label
				// }else{
				this.addr = this.area[0].label + this.area[1].label + this.area[2].label
				// }

			},
			//提交
			submit() {
				if (this.area.length == 0) {
					uni.showToast({
						title: '请选择省市区',
						icon: 'none'
					})
					return
				}
				if (!this.tel) {
					uni.showToast({
						title: '请输入联系电话',
						icon: 'none'
					})
					return
				}
				let province = this.area[0].value
				let city = this.area[1].value
				let area = this.area[2].value
				// let area = ''
				// if(this.type == 2){
				// 	area = this.area[2].label
				// }

				let formData = {
					province: province,
					city: city,
					area: area,
					type: this.type,
					mobile: this.tel,
					info: this.remark
				}
				uni.showLoading({})
				this.$http.partner_apply(formData).then(res => {
					uni.hideLoading({})
					setTimeout(() => {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}, 0)
					if (res.code == 0) {
						//提交成功，重置data数据
						Object.assign(this.$data, this.$options.data())
						setTimeout(() => {
							this.getPartnerInfo()
						}, 1000)
					}
				})
			}
		}
	}
</script>

<style scoped>
	.par {
		width: 100%;
	}

	.par-apply {
		background: rgba(254, 254, 254, 1);
		padding: 14px;
		margin-top: 20px;
	}

	.par-but.jujue {
		color: #FE4744;
	}

	.par-but-applying {
		background-color: rgba(187, 187, 187, 0.1);
		padding: 14px;
		margin-top: 20px;
		color: #FE4744;
		text-align: center;
	}

	.par-type {
		color: #111110;
		font-size: 14px;
		font-weight: bold;
	}

	.par-iphone {
		display: flex;
		flex-direction: row;
		background-color: rgba(187, 187, 187, 0.1);
		height: 43px;
		border-radius: 5px;
		align-items: center;
		margin: 10px 0;
	}

	.uni-input-placeholder {
		font-size: 12px;
		color: #898989;
	}

	.uni-textarea-placeholder {
		font-size: 12px;
		color: #898989;
	}

	.par-tar {
		display: flex;
		align-items: flex-start;
		background-color: rgba(187, 187, 187, 0.1);
		height: 100px;
		border-radius: 5px;
		padding: 12px 0;
	}

	.par-iphone:nth-of-type(1) {
		margin: 0;
	}

	.par-iphone {
		display: flex;
		flex-direction: row;
		background-color: rgba(187, 187, 187, 0.1);
		height: 43px;
		border-radius: 5px;
		align-items: center;
		margin: 15px 0;
		position: relative;
	}

	.iphone-text {
		color: #242424;
		font-size: 14px;
		padding: 0 12px;
		min-width: 160upx;
	}
	
	.iphone-text.remark {
		color: #242424;
		font-size: 14px;
		padding: 0 12px;
		min-width: 160upx;
		margin-top: -2px;
	}

	.uni-input-placeholder {
		font-size: 12px;
		color: #898989;
	}

	.add-but {
		border-radius: 15px;
		border: 1px solid #FF6001;
		color: #FF6001;;
		padding: 3px 12px;
		font-weight: bold;
		position: absolute;
		right: 10px;
	}

	.par-but {
		width: 618upx;
		height: 80upx;
	
background: linear-gradient(90deg, #FFC500 0%, #FF5F01 100%);
		/* box-shadow: 0px 2upx 8upx 0px rgba(168, 170, 253, 1); */
		border-radius: 48upx;
		line-height: 80upx;
		text-align: center;
		font-size: 14px;
		color: #FFFFFF;
		margin: 30px auto;
	}
</style>
